import React, { Component } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import { Form, Table, Divider } from 'antd';
import SearchForm from './SearchForm';

interface Props {
  form?: any,
  dispatch?: Function,
  initCurrent?: Function,
  buttons?: Array<any>,
  list?: {
    data: Array<any>,
    dataCnt: number
  }
}

interface IState {
  current: number
}

const ONE_PAGE_SIZE = 10;

@connect(({ record, menu }) => ({
  list: record.list || {},
  buttons: menu.buttons,
}))
class RecordListS extends Component<Props, any> {

  readonly state:IState = {
    current: 1
  }

  queryData(offset = 1, size = ONE_PAGE_SIZE) {
    const { dispatch } = this.props;
    dispatch({
      type: 'record/queryPage',
      payload: {
        pageNum: offset,
        pageSize: size,
      },
    });
  }

  initCurrent = () => {
    this.setState({
      current: 1
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'record/initCond' })
  }

  render() {
    const { buttons } = this.props;
    const btnList = {};
    if(Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }

    const columns = [{
        title: '报备时间',
        dataIndex: 'createTime'
      }, {
        title: '联系人姓名',
        dataIndex: 'contractName'
      }, {
        title: '审核结果',
        dataIndex: 'statusName'
      }, {
        title: '联系电话',
        dataIndex: 'contractPhone'
      }, {
        title: '操作', key: 'x', render: (record, text, index) => {
        return (
          <div style={{display: 'flex'}}>
            {
              btnList['详情'] ? <>
                <Link to={`/data/record/${record.id}/details`}>详情</Link>
                <Divider type="vertical" />
              </> : null
            }
            {
              btnList['审核'] && +record.status === 1 ? <>
                <Link to={`/data/record/${record.id}/audit`}>审核</Link>
              </> : null
            }
          </div>
        )}
      }
    ];
    const { list } = this.props;
    const { data = [], dataCnt } = list;
    const datas = data && Array.isArray(data) ? data.map((item, index) => ({
        key: item.id,
        id: item.id,
        createTime: item.createTime,
        contractName: item.contractName ? item.contractName : '/',
        statusName: item.statusName ? item.statusName : '/',
        status: item.status,
        contractPhone: item.contractPhone ? item.contractPhone : '/'
      })
    ) : []
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      onChange: (current, page) => {
        this.setState({ current })
        this.queryData(current)
      }
    };
    return (
      <>
        <SearchForm current={ this.state.current } initCurrent={this.initCurrent}/>
        <Table pagination={pagination} bordered columns={columns} dataSource={datas} />
      </>
    )
  }
}

const RecordList = Form.create()<any>(RecordListS);
export default RecordList;
